<!--
 * @Author: liujiachen liujiachen@neuedu.com
 * @Date: 2024-10-24 13:43:57
 * @LastEditors: liujiachen liujiachen@neuedu.com
 * @LastEditTime: 2024-11-18 16:40:45
 * @FilePath: \WWW\shop\src\views\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <van-nav-bar title="VueShop" />

  <van-swipe :autoplay="3000" indicator-color="white">
    <van-swipe-item v-for="(item,key) in coupon" :key="key" @click="CouponIndex(item.id)">
      <van-image width="100%" height="250" fit="cover" :src="item.thumb_text" />
    </van-swipe-item>
  </van-swipe>

  <van-grid :border="false" :column-num="4">
    <van-grid-item to="/product" text="全部商品">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/quanbu.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/live/" text="商品直播">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/zhibo.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/coupon" text="优惠活动">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/youhui.png" />
     </template>
    </van-grid-item>
    <van-grid-item to="/product/rank" text="榜单排行">
     <template #icon>
        <van-image width="50" height="50" src="/assets/images/bangdan.png" />
     </template>
    </van-grid-item>
  </van-grid>

  <div class="type">新品推荐</div>

  <div class="list">
    <!-- 新品推荐 -->
    <router-link v-for="(item,key) in news" :key="key" :to="{path:'/product/info',query:{proid:item.id}}" class="item">
      <div class="back">
        <img :src="item.thumbs_text" />
      </div>
      <p class="price">￥{{item.price}}</p>
    </router-link>

  </div>

  <Tabbar />
</template>

<script setup>
  const {proxy} = getCurrentInstance();
  //优惠券
  let coupon = ref([]);
  //新品推荐
  let news = ref([]);
  //页面挂载后调用 直接v-for循环
  onMounted(async ()=>{
    //发送同步请求
    var result = await proxy.$POST({
      url:'/index/index',
    })
    if(result.code == 0){
      proxy.$fail(result.msg);
      return false
    }
    coupon.value = result.data.coupon;
    news.value = result.data.news;
  })
  const CouponIndex = (cid) => proxy.$router.push({path:'/coupon/info',query:{id:cid}})
</script>

<style scoped>
  @import url('/assets/css/home.css');
</style>